<template>
    <div>
        <div class="box">
            <div class="bos">
                <div class="nav">
                    <div class="navOne">
                        <template v-for="(item, key) of tabs" :key="key">
                            <div class="btn" :class="{ active: itemIndex === item.orderNum }"
                                @click="btnClick(item.orderNum)">{{
                                    item.text }}</div>
                        </template>
                    </div>
                    <div>
                        <a-date-picker v-model:value="value3" picker="month" @change="onHandleChange" />
                    </div>
                </div>
                <div v-if="itemIndex == 1">
                    <div class="container">
                        <div class="tableTop">
                            <div class="title">标题</div>
                            <div class="laiYuan">来源</div>
                            <div class="dataTiem">发起时间</div>
                            <div class="caoZuo">操作</div>
                        </div>
                    </div>
                    <div class="gunD">
                        <div class="containerA" v-for="(item, index) in form" :key="item.id"
                            @mouseover="dowmloadover(index)" @mouseleave="downloadleave(index)"
                            :class="isAcitive === index ? 'isAcitive' : ''">
                            <div class="tableTopA">
                                <div class="titleA">
                                    <div class="titleA-img">
                                        <div v-if="item.isRead == 1" class="icon-xinfeng-kai"></div>
                                        <img v-else src="@/assets/imgSrc/xinfeng.png" alt="" />
                                    </div>
                                    <div class="titleA-title">{{ item.title }}</div>
                                </div>
                                <div class="laiYuan">{{ item.createByAccount }}</div>
                                <div class="dataTiem">{{ item.createDate }}</div>
                                <div class="caoZuo">
                                    <div class="chaK" @click="lookorgDetail(item, index)">查看</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="itemIndex == 2">
                    <div class="container">
                        <div class="tableTop">
                            <div class="title">标题</div>
                            <div class="laiYuan">来源</div>
                            <div class="dataTiem">发起时间</div>
                            <div class="caoZuo">操作</div>
                        </div>
                    </div>
                    <div class="gunD">
                        <div class="containerA" v-for="(item, index) in form" :key="item.id"
                            @mouseover="dowmloadover(index)" @mouseleave="downloadleave(index)"
                            :class="isAcitive === index ? 'isAcitive' : ''">
                            <div class="tableTopA">
                                <div class="titleA">
                                    <div class="titleA-img">
                                        <div v-if="item.isRead == 1" class="icon-xinfeng-kai"></div>
                                        <img v-else src="@/assets/imgSrc/xinfeng.png" alt="" />
                                    </div>
                                    <div class="titleA-title">{{ item.title }}</div>
                                </div>
                                <div class="laiYuan">{{ item.createByAccount }}</div>
                                <div class="dataTiem">{{ item.createDate }}</div>
                                <div class="caoZuo">
                                    <div class="chaK" @click="lookorgDetail(item, index)">查看</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="itemIndex == 3">
                    <div class="container">
                        <div class="tableTop">
                            <div class="title">标题</div>
                            <div class="laiYuan">来源</div>
                            <div class="dataTiem">发起时间</div>
                            <div class="caoZuo">操作</div>
                        </div>
                    </div>
                    <div class="gunD">
                        <div class="containerA" v-for="(item, index) in form" :key="item.id"
                            @mouseover="dowmloadover(index)" @mouseleave="downloadleave(index)"
                            :class="isAcitive === index ? 'isAcitive' : ''" @click="businessDatabase(item, index)">
                            <div class="tableTopA">
                                <div class="titleA">
                                    <div class="titleA-img">
                                        <div v-if="item.isRead == 1" class="icon-xinfeng-kai"></div>
                                        <img v-else src="@/assets/imgSrc/xinfeng.png" alt="" />
                                    </div>
                                    <div class="titleA-title">{{ item.title }}</div>
                                </div>
                                <div class="laiYuan">{{ item.createByAccount }}</div>
                                <div class="dataTiem">{{ item.createDate }}</div>
                                <div class="caoZuo">
                                    <div class="chaK" @click="businessDatabase(item, index)">查看</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { dateTypeFormat } from '@/utils/dateFormat'
export default {
    name: 'SkrivetVueIndex',
    data() {
        return {
            itemIndex: 1,
            isAcitive: false, // 移入变色
            value3: '',
            form: [],
            dateString: ''
        }
    },
    created() {

    },
    mounted() {
        this.init()
    },

    methods: {
        onHandleChange(date, dateString) {
            this.dateString = dateString;
            this.dictionary(dateString);
        },
        init() {
            this.dictionary()
        },
        dictionary(dateString) {
            this.$api.GET('/data/dict/item/pageList?groupId=CONTENT').then(res => {
                const that = this;
                if (res.data && res.data.length > 0) {
                    that.tabs = res.data.sort((a, b) => {
                        return a.orderNum - b.orderNum;
                    });
                }
                if (res.data && res.data.length > 0) {
                    if (res.data) {
                        if (dateString) {
                            that.$api.GET('/modules/notice/pageList', { createDate: dateString }).then(res => {
                                res.data.forEach(item => {
                                    item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
                                });
                                that.form = res.data;
                            });
                        } else {
                            that.$api.GET('/modules/notice/pageList').then(res => {
                                res.data.forEach(item => {
                                    item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
                                });
                                that.form = res.data;
                            });
                        }
                    }

                }
            })
        },
        btnClick(key) {
            this.itemIndex = key
            console.log(this.itemIndex);
            if (this.dateString) {
                if (this.itemIndex == 1) {
                    this.$api.GET('/modules/notice/pageList', { createDate: dateString }).then(res => {
                        res.data.forEach(item => {
                            item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
                        });
                        // console.log('通知公告', res.data);
                        this.form = res.data
                    })
                } else if (this.itemIndex == 2) {
                    this.$api.GET('/modules/special/pageList', { createDate: dateString }).then(res => {
                        res.data.forEach(item => {
                            item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
                        });
                        // console.log('专题专栏', res.data);
                        this.form = res.data
                    })
                } else if (this.itemIndex == 3) {
                    this.$api.GET('/modules/infomation/pageList', { createDate: dateString }).then(res => {
                        res.data.forEach(item => {
                            item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
                        });
                        // console.log('业务资料库', res.data);
                        this.form = res.data
                    })
                }
            } else {
                if (this.itemIndex == 1) {
                    this.$api.GET('/modules/notice/pageList').then(res => {
                        res.data.forEach(item => {
                            item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
                        });
                        // console.log('通知公告', res.data);
                        this.form = res.data
                    })
                } else if (this.itemIndex == 2) {
                    this.$api.GET('/modules/special/pageList').then(res => {
                        res.data.forEach(item => {
                            item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
                        });
                        // console.log('专题专栏', res.data);
                        this.form = res.data
                    })
                } else if (this.itemIndex == 3) {
                    this.$api.GET('/modules/infomation/pageList').then(res => {
                        res.data.forEach(item => {
                            item.createDate = dateTypeFormat('YYYY-mm-dd HH:MM:SS', new Date(item.createDate));
                        });
                        // console.log('业务资料库', res.data);
                        this.form = res.data
                    })
                }
            }
        },
        // 鼠标点击事件 给变量赋值当前index
        lookorgDetail(item, index) {
            // console.log(item);
            this.isAcitive = index
            this.$router.push('/content/article/notice')
            // console.log(index);
        },

        specialColumn(item, index) {
            // console.log(item);
            this.isAcitive = index
            this.$router.push('/content/article/special')
            // console.log(index);
        },
        businessDatabase(item, index) {
            // console.log(item);
            this.isAcitive = index
            this.$router.push('/content/article/infomation')
            // console.log(index);
        },
        // 鼠标移入赋值index 
        dowmloadover(index) {
            this.isAcitive = index
            // console.log(index);
        },
        // 鼠标移出 
        downloadleave(index) {
            this.isAcitive = false
        },

    },
};
</script>
  
<style lang="less" scoped>
.isAcitive {
    cursor: pointer; // 鼠标小手
    background: #0031B4 !important;
}

::v-deep(.ant-picker-panel-container) {
    background: #0031B4 !important;
}

::v-deep(.ant-picker) {
    border-radius: 20px;
    background: #0044ff;
    border: none;
    // color: #fff;
}

::v-deep(.ant-picker-input>input) {
    color: #fff;
}

::v-deep(.anticon svg) {
    color: #bdb8b8;
}

.gunD {
    overflow: auto;
    height: 170px;
    // padding-top: 15px;
}

::-webkit-scrollbar {
    width: 0;
    height: 10px;
}

// .ant-picker-suffix
.bos {
    margin: 20px;
    border: 2px solid #0044ff;
    border-radius: 10px;
    padding: 10px 0 20px 0;
    box-shadow: inset 0px 0px 10px 34px rgba(3, 9, 90, 60%);
    font-size: 14px;

    .nav {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        .navOne {
            display: flex;
            align-items: center;
        }
    }
}

.btn {
    font-size: 18px;
    font-weight: 600;
    padding-right: 50px;
    color: #07c6e5;
}

.active {
    color: #fff;
}

.container {
    margin: 20px 30px 5px 30px;
    display: flex;

    img {
        width: 60px;
        height: 60px;
    }

    .tableTop {
        display: flex;
        color: #fff;
        justify-content: space-around;
        background-color: rgba(0, 15, 70, 0.8);
        width: 100%;
        padding: 15px 0;
        text-align: center;
        font-size: 15px;
        padding-left: 20px;

        .title {
            flex: 3;
        }

        .laiYuan {
            flex: 2;
            padding-left: 20px;

        }

        .dataTiem {
            flex: 2;
        }

        .caoZuo {
            flex: 1.5;
        }
    }
}

.containerA {
    margin: 5px 30px 0px 30px;
    display: flex;

    .tableTopA {
        display: flex;
        color: #fff;
        justify-content: space-around;
        background-color: rgba(0, 15, 70, 0.8);
        width: 100%;
        padding: 15px 0;
        text-align: center;

        .titleA {
            display: flex;
            // align-items: center;
            justify-content: center;
            font-size: 15px;
            // padding-left: 30px;
            flex: 4.5;

            .titleA-img {
                padding-right: 5px;
                padding-bottom: 2px;
                display: flex;
                align-items: center;

                img {
                    width: 14px;
                    height: 13px;
                }
            }

            .titleA-title {
                width: 310px;
                /* 设置元素的宽度 */
                white-space: nowrap;
                /* 禁止文字换行 */
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .laiYuan {
            flex: 2;
            color: #09B0E7;
            font-size: 14px;
            // margin-right: 10px;
        }

        .dataTiem {
            flex: 3;
            color: rgb(133, 127, 127)
        }

        .caoZuo {

            .chaK {
                width: 70px;
                color: #000;
                padding: 2px 10px;
                border-radius: 20px;
                margin-left: 10px;
                font-size: 12px;
                font-weight: 600;
                background: #01D7F5;
            }

            flex: 1.5;
        }
    }
}
</style>